<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>哔哩哔哩[]~(￣▽￣)~*</title>
  <!-- 引入字体图标 -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <!-- 引入css样式 -->
  <link rel="stylesheet" href="css/index.css">
  <!-- 引入字体图标文件 -->
  <link rel="stylesheet" href="fonts/iconfont.css">
  
</head>
<body>
<!-- 头部模块 -->
<header class="suspension">
  <div class="navbar">
    <!-- logo -->
    <a href="#" class="logo">
      <i class="iconfont Navbar_logo"></i>
    </a>
    <!-- 右侧 -->
    <div class="right">
      <a href="#" class="search">
        <i class="iconfont ic_search_tab"></i>
      </a>
      <a href="#" class="face">
        <img src="images/login.png" alt="">
      </a>
      <div class="app-btn">
        <img src="images/download.png" alt="">
      </div>
    </div>
  </div>
  <div class="channel-menu">
    <div class="tabs">
      <!-- 很宽的盒子 -->
      <div class="tabs-list">
        <a href="#">首页</a>
        <a href="#">番剧</a>
        <a href="#">国创</a>
        <a href="#">音乐</a>
        <a href="#">舞蹈</a>
        <a href="#">游戏</a>
        <a href="#">知识</a>
        <a href="#">科技</a>
        <a href="#">运动</a>
        <a href="#">汽车</a>
        <a href="#">生活</a>
        <a href="#">美食</a>
        <!-- 红色线 -->
        <div class="line"></div>
      </div>
    </div>
    <div class="after">
      <i class="iconfont general_pulldown_s"></i>
    </div>
  </div>
</header>

<!-- 主体模块 -->
<div class="m-home">
  <div class="vedio-list">
    <a href="#" class="vedio-item">
      <div class="card">
        <img src="images/dog.jpg@480w_270h_1c" alt="">
        <!-- 播放量 -->
        <div class="count">
          <span>
            <i class="iconfont icon_shipin_bofangshu"></i>
            播放量
          </span>
          <span>
            <i class="iconfont icon_shipin_danmushu"></i>
            弹幕数
          </span>
        </div>
      </div>
      <p class="title">消费主义，是怎么悄悄榨干年轻人的？全网最深度分析，让你学会真正省钱！</p>
    </a>
    <a href="#" class="vedio-item">
      <div class="card">
        <img src="images/dog.jpg@480w_270h_1c" alt="">
        <!-- 播放量 -->
        <div class="count">
          <span>
            <i class="iconfont icon_shipin_bofangshu"></i>
            播放量
          </span>
          <span>
            <i class="iconfont icon_shipin_danmushu"></i>
            弹幕数
          </span>
        </div>
      </div>
      <p class="title">消费主义，是怎么悄悄榨干年轻人的？全网最深度分析，让你学会真正省钱！</p>
    </a>
    <a href="#" class="vedio-item">
      <div class="card">
        <img src="images/dog.jpg@480w_270h_1c" alt="">
        <!-- 播放量 -->
        <div class="count">
          <span>
            <i class="iconfont icon_shipin_bofangshu"></i>
            播放量
          </span>
          <span>
            <i class="iconfont icon_shipin_danmushu"></i>
            弹幕数
          </span>
        </div>
      </div>
      <p class="title">消费主义，是怎么悄悄榨干年轻人的？全网最深度分析，让你学会真正省钱！</p>
    </a>
    <a href="#" class="vedio-item">
      <div class="card">
        <img src="images/dog.jpg@480w_270h_1c" alt="">
        <!-- 播放量 -->
        <div class="count">
          <span>
            <i class="iconfont icon_shipin_bofangshu"></i>
            播放量
          </span>
          <span>
            <i class="iconfont icon_shipin_danmushu"></i>
            弹幕数
          </span>
        </div>
      </div>
      <p class="title">消费主义，是怎么悄悄榨干年轻人的？全网最深度分析，让你学会真正省钱！</p>
    </a>
    <a href="#" class="vedio-item">
      <div class="card">
        <img src="images/dog.jpg@480w_270h_1c" alt="">
        <!-- 播放量 -->
        <div class="count">
          <span>
            <i class="iconfont icon_shipin_bofangshu"></i>
            播放量
          </span>
          <span>
            <i class="iconfont icon_shipin_danmushu"></i>
            弹幕数
          </span>
        </div>
      </div>
      <p class="title">消费主义，是怎么悄悄榨干年轻人的？全网最深度分析，让你学会真正省钱！</p>
    </a>
    <a href="#" class="vedio-item">
      <div class="card">
        <img src="images/dog.jpg@480w_270h_1c" alt="">
        <!-- 播放量 -->
        <div class="count">
          <span>
            <i class="iconfont icon_shipin_bofangshu"></i>
            播放量
          </span>
          <span>
            <i class="iconfont icon_shipin_danmushu"></i>
            弹幕数
          </span>
        </div>
      </div>
      <p class="title">消费主义，是怎么悄悄榨干年轻人的？全网最深度分析，让你学会真正省钱！</p>
    </a>
    <a href="#" class="vedio-item">
      <div class="card">
        <img src="images/dog.jpg@480w_270h_1c" alt="">
        <!-- 播放量 -->
        <div class="count">
          <span>
            <i class="iconfont icon_shipin_bofangshu"></i>
            播放量
          </span>
          <span>
            <i class="iconfont icon_shipin_danmushu"></i>
            弹幕数
          </span>
        </div>
      </div>
      <p class="title">消费主义，是怎么悄悄榨干年轻人的？全网最深度分析，让你学会真正省钱！</p>
    </a>
    <a href="#" class="vedio-item">
      <div class="card">
        <img src="images/dog.jpg@480w_270h_1c" alt="">
        <!-- 播放量 -->
        <div class="count">
          <span>
            <i class="iconfont icon_shipin_bofangshu"></i>
            播放量
          </span>
          <span>
            <i class="iconfont icon_shipin_danmushu"></i>
            弹幕数
          </span>
        </div>
      </div>
      <p class="title">消费主义，是怎么悄悄榨干年轻人的？全网最深度分析，让你学会真正省钱！</p>
    </a>
    <a href="#" class="vedio-item">
      <div class="card">
        <img src="images/dog.jpg@480w_270h_1c" alt="">
        <!-- 播放量 -->
        <div class="count">
          <span>
            <i class="iconfont icon_shipin_bofangshu"></i>
            播放量
          </span>
          <span>
            <i class="iconfont icon_shipin_danmushu"></i>
            弹幕数
          </span>
        </div>
      </div>
      <p class="title">消费主义，是怎么悄悄榨干年轻人的？全网最深度分析，让你学会真正省钱！</p>
    </a>
    <a href="#" class="vedio-item">
      <div class="card">
        <img src="images/dog.jpg@480w_270h_1c" alt="">
        <!-- 播放量 -->
        <div class="count">
          <span>
            <i class="iconfont icon_shipin_bofangshu"></i>
            播放量
          </span>
          <span>
            <i class="iconfont icon_shipin_danmushu"></i>
            弹幕数
          </span>
        </div>
      </div>
      <p class="title">消费主义，是怎么悄悄榨干年轻人的？全网最深度分析，让你学会真正省钱！</p>
    </a>
    <a href="#" class="vedio-item">
      <div class="card">
        <img src="images/dog.jpg@480w_270h_1c" alt="">
        <!-- 播放量 -->
        <div class="count">
          <span>
            <i class="iconfont icon_shipin_bofangshu"></i>
            播放量
          </span>
          <span>
            <i class="iconfont icon_shipin_danmushu"></i>
            弹幕数
          </span>
        </div>
      </div>
      <p class="title">消费主义，是怎么悄悄榨干年轻人的？全网最深度分析，让你学会真正省钱！</p>
    </a>
    <a href="#" class="vedio-item">
      <div class="card">
        <img src="images/dog.jpg@480w_270h_1c" alt="">
        <!-- 播放量 -->
        <div class="count">
          <span>
            <i class="iconfont icon_shipin_bofangshu"></i>
            播放量
          </span>
          <span>
            <i class="iconfont icon_shipin_danmushu"></i>
            弹幕数
          </span>
        </div>
      </div>
      <p class="title">消费主义，是怎么悄悄榨干年轻人的？全网最深度分析，让你学会真正省钱！</p>
    </a>
  </div>
</div>

<!-- 底部模块 -->
<footer class="app">
  <div class="btn-app">
    <i class="iconfont Navbar_logo"></i>
    打开APP，看你感兴趣的视频
  </div>
</footer>
</body>
</html>